
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.box_iten{
    display: flex;
    flex-wrap: wrap;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 会 员 列 表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    clearable
                    v-model="query.openid"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="会员ID"
                    class="handle-input mr10"
                ></el-input>
                <el-input
                    clearable
                    v-model="query.mobile"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="手机号"
                    class="handle-input mr10"
                ></el-input>
                <el-select placeholder="等级" style="width: 200px; margin: 0 20px 0 0" clearable v-model="query.rank">
                    <el-option v-for="item in rankList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-button type="primary" @click="getList">搜索</el-button>
            </div>
            <el-table :data="tableData" height="400" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="openid" label="会员ID" show-overflow-tooltip width="250" align="center"></el-table-column>
                <el-table-column prop="" label="头像" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.wechatInfo.avatarUrl" :preview-src-list="[scope.row.wechatInfo.avatarUrl]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" width="100" align="center">
                    <template slot-scope="scope">
                    {{ scope.row.wechatInfo.nickName }}
                  </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" width="100" align="center">
                    <!-- <template slot-scope="scope">
                    <span v-if="scope.row.fundTypeName == 10" >余额</span>
                    <span v-if="scope.row.fundTypeName == 20" >期权</span>
                    <span v-if="scope.row.fundTypeName == 30" >互助</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="rank" label="等级" width="100" align="center"></el-table-column>
                <el-table-column prop="parentOpenid" label="推荐人id" width="100" align="center"></el-table-column>
                <el-table-column prop="parentMobile" label="推荐人手机号" width="200" align="center"></el-table-column>
                <el-table-column prop="status" label="会员状态" align="center"> </el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" v-if="scope.row.status == '启用'" @click="close(scope.row.id)">禁用</el-button>
                        <el-button size="mini" type="warning" v-else @click="open(scope.row.id)">启用</el-button>
                        <el-button size="mini" type="primary" @click="queryDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="详情" :visible.sync="senInfoShow" width="80%">
            <el-form ref="send" :model="senInfo" label-width="150px" label-position="left">
                <div>
                    <div style="font-size: 14px; font-weight: 600; margin: 0 0 20px; background: #f2f2f2; padding: 10px 5px">会员信息</div>
                    <div style="padding: 0 5px" class="box_iten">
                        <el-form-item label="昵称:" label-width="100px" style="width:50%">
                            {{ (senInfo.wechatInfo || {}).nickName }}
                        </el-form-item>
                        <el-form-item label="会员Id:" label-width="100px" style="width:50%">
                            {{ senInfo.openid }}
                        </el-form-item>
                        <el-form-item label="手机号:" label-width="100px" style="width:50%">
                            {{ senInfo.mobile }}
                            <el-button size="mini" @click="showChangeMobile = true" type="danger" style="margin:0 0 0 20px">修改</el-button> 
                        </el-form-item>
                        <el-form-item label="等级:" label-width="100px" style="width:50%">
                            {{ senInfo.rank }}
                            <el-button size="mini" @click="showChangerank = true" type="danger" style="margin:0 0 0 20px">修改</el-button> 
                        </el-form-item>
                        <el-form-item label="推荐人ID:" label-width="100px" style="width:50%">
                            {{ senInfo.parentOpenid }}
                            <el-button size="mini" @click="showtuijianMobile = true" type="danger" style="margin:0 0 0 20px">修改</el-button> 
                        </el-form-item>
                        <el-form-item label="推荐人手机号:" label-width="100px" style="width:50%">
                            {{ senInfo.parentMobile }}
                        </el-form-item>
                        <el-form-item label="会员状态:" label-width="100px" style="width:50%">
                            {{ senInfo.status }}
                        </el-form-item>
                        <el-form-item label="余额:" label-width="100px" style="width:50%">
                            {{ senInfo.cashAmount }}
                        </el-form-item>
                        <el-form-item label="购物券:" label-width="100px" style="width:50%">
                            {{ senInfo.exchangeAmount }}
                        </el-form-item>
                        <el-form-item label="总拼团数量:" label-width="100px" style="width:50%">
                            {{ senInfo.totalPTCount }}
                        </el-form-item>
                        <el-form-item label="今日拼团数量:" label-width="100px" style="width:50%">
                            {{ senInfo.todayPTCount }}
                        </el-form-item>
                        <el-form-item label="总组团数量:" label-width="100px" style="width:50%">
                            {{ senInfo.totalZTCount }}
                        </el-form-item>
                        <el-form-item label="今日组团数量:" label-width="100px" style="width:50%">
                            {{ senInfo.todayZTCount }}
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow2 = false">取 消</el-button>
                <el-button type="primary" @click="sureSend2">确 定</el-button>
            </span> -->
        </el-dialog>

        <el-dialog title="充值" :visible.sync="showCz" width="400px">
            <el-form ref="send" :model="czFrom" label-width="100px">
                <el-form-item label="会员账号:">
                    <el-input v-model="czFrom.mobile" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="账户类别:">
                    <el-select clearable v-model="czFrom.fundType" style="width: 200px" placeholder="账户类别" class="handle-select mr10">
                        <el-option key="1" label="余额" :value="10"></el-option>
                        <el-option key="2" label="期权" :value="20"></el-option>
                        <el-option key="3" label="互助" :value="30"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="金额/数量:">
                    <el-input v-model="czFrom.amount" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showCz = false">取 消</el-button>
                <el-button type="primary" @click="sureSend">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="扣费" :visible.sync="senInfoShow2" width="400px">
            <el-form ref="send" :model="senInfo2" label-width="100px">
                <el-form-item label="会员账号:">
                    <el-input v-model="senInfo2.mobile" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="账户类别:">
                    <el-select clearable v-model="senInfo2.fundType" style="width: 200px" placeholder="账户类别" class="handle-select mr10">
                        <el-option key="1" label="余额" :value="10"></el-option>
                        <el-option key="2" label="期权" :value="20"></el-option>
                        <el-option key="3" label="互助" :value="30"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="金额/数量:">
                    <el-input v-model="senInfo2.amount" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="senInfoShow2 = false">取 消</el-button>
                <el-button type="primary" @click="sureSend2">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改手机号" :visible.sync="showChangeMobile" width="500px">
            <el-form ref="send" :model="changePhone" label-width="100px">
                <!-- <el-form-item label="会员id:">
                    <el-input v-model="changePhone.id" disabled style="width: 300px"></el-input>
                </el-form-item> -->
                <el-form-item label="手机号:">
                    <el-input v-model="changePhone.mobile" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showChangeMobile = false">取 消</el-button>
                <el-button type="primary" @click="sureMoblie">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改会员等级" :visible.sync="showChangerank" width="500px">
            <el-form ref="send" :model="changeRank" label-width="100px">
                <el-select placeholder="等级" style="width: 200px; margin: 0 20px 0 0" clearable v-model="changeRank.rank">
                    <el-option v-for="item in rankList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showChangerank = false">取 消</el-button>
                <el-button type="primary" @click="sureRank">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改推荐人账号" :visible.sync="showtuijianMobile" width="500px">
            <el-form ref="send" :model="tuijianPhone" label-width="100px">
                <!-- <el-form-item label="会员id:">
                    <el-input v-model="changePhone.id" disabled style="width: 300px"></el-input>
                </el-form-item> -->
                <el-form-item label="推荐人id:">
                    <el-input v-model="tuijianPhone.openid" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showtuijianMobile = false">取 消</el-button>
                <el-button type="primary" @click="sureTuijian">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingMember, QueryInfo, Disable, Enable,UpdateMobile,UpdateParent,UpdateRank } from '@/api/member';
import { Recharge, Deduction } from '@/api/vip';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                mobile: '',
                openid:'',
                rank:''
            },
            pageTotal: 0,
            showCz: false,
            czFrom: {
                mobile: '',
                fundType: '',
                amount: ''
            },
            senInfo2: {
                mobile: '',
                fundType: '',
                amount: ''
            },
            tableData: [],
            rankList: [],
            senInfoShow2: false,
            senInfoShow: false,
            showChangeMobile:false,
            showChangerank:false,
            senInfo: {},
            changePhone:{
                id:'',
                mobile:''
            },
            tuijianPhone:{
                id:'',
                mobile:''
            },
            changeRank:{},
            showtuijianMobile:false,
            currentId:''
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        sureTuijian(){
            UpdateParent(this.tuijianPhone).then(res => {
                console.log(res)
                if(res.RequestStatus == 200){
                    this.$message.success('修改成功')
                    this.getList()
                    this.queryDetail(this.currentId)
                    this.currentId = ''
                    this.showtuijianMobile = false
                }else{
                    this.$message.error(res.Message)
                }
            })
        },
        sureMoblie(){
            UpdateMobile(this.changePhone).then(res => {
                console.log(res)
                if(res.RequestStatus == 200){
                    this.$message.success('修改成功')
                    this.getList()
                    this.queryDetail(this.currentId)
                    this.currentId = ''
                    this.showChangeMobile = false
                }else{
                    this.$message.error(res.Message)
                }
            })
        },
        sureRank(){
            UpdateRank(this.changeRank).then(res => {
                console.log(res)
                if(res.RequestStatus == 200){
                    this.$message.success('修改成功')
                    this.getList()
                    this.queryDetail(this.currentId)
                    this.currentId = ''
                    this.showChangerank = false
                }else{
                    this.$message.error(res.Message)
                }
            })
        },
        sureSend2() {
            Deduction(this.senInfo2).then((res) => {
                console.log(res);
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.queryDetail(this.currentId)
                    this.currentId = ''
                    this.senInfoShow2 = false;
                } else if(res.RequestStatus == 400) {
                    this.$message.error(res.Message);
                    this.senInfoShow2 = false;
                }
            });
        },
        sureSend() {
            console.log(this.czFrom)
            Recharge(this.czFrom).then((res) => {
                console.log(res);
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.queryDetail(this.currentId)
                    this.currentId = ''
                    this.showCz = false;
                } else if(res.RequestStatus == 400) {
                    console.log(res);
                    this.$message.error(res.Message);
                    this.showCz = false;
                }
            });
        },
        queryDetail(id) {
            this.currentId = id
            this.changePhone.id =id
            this.tuijianPhone.id = id
            this.changeRank.id = id
            QueryInfo({ id: id }).then((res) => {
                // console.log(res)
                this.senInfo = res.Data
                this.senInfoShow = true
            });
        },
        close(id) {
            this.$confirm('确定禁用?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    Disable({ id: id }).then((res) => {
                        //   console.log(res)
                        if (res.RequestStatus == 200) {
                            this.$message.success('禁用成功');
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消禁用'
                    });
                });
        },
        open(id) {
            this.$confirm('确定启用?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    Enable({ id: id }).then((res) => {
                        //   console.log(res)
                        if (res.RequestStatus == 200) {
                            this.$message.success('启用成功');
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消启用'
                    });
                });
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingMember(this.query).then((res) => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
                this.rankList = res.Data.rankList;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(info) {
            //   console.log(info)
            this.senInfo = JSON.parse(JSON.stringify(info));
            this.senInfoShow = true;
        },
        deleteDetail(info) {
            this.senInfo2 = JSON.parse(JSON.stringify(info));
            this.senInfoShow2 = true;
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(123);
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>